<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
	<meta name="apple-mobile-web-app-cCSS Extended Completionsapable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="default">
	<meta name="theme-color" content="#2196f3">
	<meta name="format-detection" content="telephone=no">
	<meta name="msapplication-tap-highlight" content="no">
	<title>My App</title>
	<link rel="stylesheet" href="framework7/css/framework7.css">
	<link rel="stylesheet" href="css/icons.css">
	<link rel="stylesheet" href="css/app.css">
	<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" />
	<link href="video-js-6.0.0/video-js.css" rel="stylesheet">
</head>

<body>
	<div id="app" class="color-theme-orange">
		<div class="statusbar"></div>
		<div class="views tabs ios-edges">
			<!-- Tabbar for switching views-tabs -->
			<div class="toolbar tabbar-labels toolbar-bottom-md no-shadow color-theme-white">
				<div class="toolbar-inner">
					<a href="#view-home" class="tab-link tab-link-active">
						<i class="fa fa-edge fa-lg myicon"></i>
						<span class="tabber-laber">主页</span>
					</a>
					<a href="#view-catalog" class="tab-link">
						<i class="fa fa-id-card fa-lg"></i>
						<span class="tabbar-label">主页</span>
					</a>
					<a href="#view-settings" class="tab-link">
						<i class="fa fa-user-o fa-lg"></i>
						<span class="tabbar-label">我</span>
					</a>
				</div>
			</div>
			<div id="view-home" class="view view-main tab tab-active">
				<div class="page" data-name="home">
					<div class="navbar navbar-through">
						<div class="navbar-inner">
							<div class="title sliding">1+1=3</div>
						</div>
					</div>
					<div class="page-content">
						<div class="block-title">组件</div>
						<div class="block-title searchbar-hide-on-search">Page Loaders & Router</div>
						<div class="list links-list searchbar-hide-on-search">
							<ul>
								<li>
									<a href="/page-loader-template7/vladimir/123/about-me/1/?start=0&end=30#top">Template7 Page</a>
								</li>
								<li>
									<a href="/page-loader-component/vladimir/123/about-me/1/?start=0&end=30#top">Component Page</a>
								</li>
								<li>
									<a href="/request-and-load/user/123456/">Request Data & Load</a>
								</li>
								<li>
									<a href="/register/" class="item-link list-button">注册</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!-- Catalog View -->
			<div id="view-catalog" class="view tab">
				<!-- Catalog page will be loaded here dynamically from /catalog/ route -->
				<div style="text-align:center">
					<a class="button" onclick="playPause()">播放/暂停</a>
					<a class="button" onclick="makeBig()">放大</a>
					<a class="button" onclick="makeSmall()">缩小</a>
					<a class="button" onclick="makeNormal()">普通</a>
					<a class="button" onclick="AlertEnded()">alert</a>
					<br>
					<video id="video1" width="420" onended="getGold()">
						<source src="http://hd.yinyuetai.com/uploads/videos/common/0D7601345B999963CD41FB5D5CF356C0.flv" type="video/mp4">
						<source src="1234.ogg" type="video/ogg"> 您的浏览器不支持 HTML5 video 标签。
					</video>
				</div>
			</div>
			<!-- Settings View -->
			<div id="view-settings" class="view tab">
				<!-- Settings page will be loaded here dynamically from /settings/ route -->
			</div>
		</div>
		<!-- Popup -->
		<div class="popup" id="my-popup">
			<div class="view">
				<div class="page">
					<div class="navbar">
						<div class="navbar-inner">
							<div class="left">
								<a class="link popup-close">
									<i class="icon icon-back"></i>
									<span class="link back">余额</span>
								</a>
							</div>
							<div class="title"></div>
						</div>
					</div>
					<div class="page-content">
						<div class="subnavbar">
							<div class="subnavbar-inner">
								<div class="segmented segmented-raised">
									<a class="button tab-link tab-link-active" href="#tab1">金币</a>
									<a class="button tab-link" href="#tab2">现金</a>
								</div>
							</div>
						</div>
						<div class="page-content hide-navbar-on-scroll">
							<div class="tabs">
								<div class="tab tab-active" id="tab1">
									<div class="card demo-facebook-card">
										<div class="card-header">
											<div class="demo-facebook-avatar">
												你当前金币余额为:
											</div>
										</div>
										<div class="card-content gold-size-main">
											256
										</div>
										<div class="card-footer">
											<a href="#" class="button open-confirm">充值</a>
											<a href="#" class="open-confirm">提现</a>
										</div>
									</div>
								</div>
								<div class="tab" id="tab2">
									<div class="card demo-facebook-card">
										<div class="card-header">
											<div class="demo-facebook-avatar">
												你当前现金余额为:
											</div>
										</div>
										<div class="card-content gold-size-main">
											15
										</div>
										<div class="card-footer">
											<a href="#" class="open-alert">兑换金币</a>
											<a href="#" class="botton open-confirm">提现到微信</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Login Screen -->
		<div id="view-login" class="view">
			<div class="login-screen" id="my-login-screen">
				<div class="view">
					<div class="page">
						<div class="page-content login-screen-content">
							<div class="login-screen-title">嘻唰唰</div>
							<div class="list">
								<ul>
									<li class="item-content item-input">
										<div class="item-inner">
											<div class="item-title item-label">账号</div>
											<div class="item-input-wrap">
												<input type="text" name="username" placeholder="">
											</div>
										</div>
									</li>
									<li class="item-content item-input">
										<div class="item-inner">
											<div class="item-title item-label">密码</div>
											<div class="item-input-wrap">
												<input type="password" name="password" placeholder="">
											</div>
										</div>
									</li>
								</ul>
							</div>
							<div class="list">
								<ul>
									<li>
										<a href="#" class="item-link list-button login-button">登录</a>
									</li>
									<li>
										<a href="/register/" class="item-link list-button login-button">注册</a>
									</li>
								</ul>
								<div class="block-footer">登录即表示同意我们
									<a href="#" style="color: aqua">用户服务协议</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- Framework7 library -->
	<script src="framework7/js/framework7.min.js"></script>
	<script src="video-js-6.0.0/video.js"></script>
	<script src="js/routes.js"></script>
	<script src="js/app.js"></script>
	<script src="js/Advideo.js"></script>
	<script>
		var myVideo = document.getElementById("video1");

		function playPause() {
			if (myVideo.paused)
				myVideo.play();
			else
				myVideo.pause();
		}

		function makeBig() {
			myVideo.width = 560;
		}

		function makeSmall() {
			myVideo.width = 320;
		}

		function makeNormal() {
			myVideo.width = 420;
		}
		function AlertEnded(){
			if(myVideo.ended){
				app.dialog.alert('获得xxx金币');
			}
			else{
				app.dialog.alert('请看完视频');
			}
		}
		function getGold(){
			app.dialog.alert('获得xxx金币');
		}
		// 		function theme() {
		// 			var themeCol = document.getElementById('themeCol');
		// 			var app = document.getElementById('app');
		// 			if (themeCol == 'blue') {
		// 				app.className = 'color-theme-blue framework7-root';
		// 			} else if (themeCol == 'orange') {
		// 				app.className = 'color-theme-orange framework7-root';
		// 			} else if (themeCol == 'dark') {
		// 				app.className = 'color-theme-black theme-dark framework7-root';
		// 			} else if (themeCol == 'purple') {
		// 				app.className = 'color-theme-pink framework7-root';
		// 			} else if (themeCol == 'pink') {
		// 				app.className = 'color-theme-pink framework7-root';
		// 			} else if (themeCol == 'gray') {
		// 				app.className = 'color-theme-gray framework7-root';
		// 			}
		// 		}
	</script>
</body>

</html>
